@charset "UTF-8";
@import "_rreset";
$fs:64px;
html {
    font-size: $fs;
}

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem
}

.main_body {
    width: 100%;
    height: 100%;
    font-size: 0;
    .main_top {
        width: 100%;
        height: r(90px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(15px);
        background-color: #f7f7f7;
        border-bottom: r(1px) solid #e1e1e1;
        img {
            padding-top: r(5px);
        }
        p {
            font-size: r(34px);
        }
        a {
            font-size: r(25px);
            color: #666666;
        }
    }
    //分割线
    hr {
        width: 100%;
        height: 0;
        border-bottom: r(20px) solid #f3f4f6;
    }
    .main_content_title {
        width: 100%;
        height: r(80px);
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: r(25px);
        padding: 0 r(15px);
        border-top: r(1px) solid #e1e1e1;
        border-bottom: r(1px) solid #e1e1e1;
        .LQbtn {
            font-size: r(25px);
            padding: r(10px) r(30px);
            margin-right: r(10px);
            border-radius: r(10px);
            color: #666666;
            background-color: white;
            border: r(1px) solid #e1e1e1;
        }
        span {
            color: #666666;
        }
    }
    .t1 {
        width: 100%;
        height: r(90px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(15px);
        .a1 {
            font-size: r(26px);
            margin-left: r(60px);
            color: #666666;
            flex-grow: 1;
            .sp1 {
                background-color: red;
                color: white;
                padding: r(1px) r(10px);
                margin-right: r(10px);
            }
        }
    } //结尾
    //主要展示内容
    .main_content {
        margin-bottom: r(200px);
        .container {
            height: r(300px);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
        .nav {
            height: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        .con {
            width: r(640px);
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 0;
            .son1 {
                width: r(75px);
                padding: 0 r(20px);
                height: r(230px);
                .options {
                    width: r(35px);
                    height: r(35px);
                    margin-top: r(35px);
                    border-radius: 50%;
                    padding-left: r(4px);
                    border: r(1px) solid #e1e1e1;
                    i {
                        text-align: center;
                        line-height: r(35px);
                        font-size: r(25px);
                        color: white;
                    }
                }
            }
            .son2 {
                width: r(565px);
                height: r(300px);
                padding: r(25px) 0;
                border-bottom: r(1px) solid #E1E1E1;
                display: flex;
                justify-content: space-between;
                .item_pic {
                    width: r(178px);
                    height: r(250px);
                    img {
                        width: 100%;
                        display: block;
                        border: r(1px) solid #E1E1E1;
                    }
                    .Number_of {
                        width: r(178px);
                        height: r(50px);
                        border: r(1px) solid #666666;
                        border-radius: r(5px);
                        margin-top: r(23px);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: r(18px);
                        .at1,.at2 {
                            width: 25%;
                            font-size: r(18px);
                            text-align: center;
                        }
                        .at1:active,.at2:active {
                            width: 25%;
                            height: 100%;
                            line-height: r(57px);
                            font-size: r(18px);
                        }
                        .Number_of_span {
                            width: 50%;
                            height: 100%;
                            border-left: r(1px) solid #666666;
                            border-right: r(1px) solid #666666;
                            line-height: r(50px);
                            text-align: center;
                        }
                    }
                }
                .item_text {
                    width: r(385px);
                    font-size: r(20px);
                    margin-left: r(20px);
                    .p1 {
                        font-size: r(30px);
                    }
                    .p2 {
                        margin: r(10px) 0 r(30px) 0;
                        color: #E1E1E1;
                    }
                    span {
                        color: #d62d31;
                        font-size: r(25px);
                    }
                }
            }
            //删除部分，添加动态改变.con的宽度即可，横向滚动条已经隐藏
            .son3 {
                display: none;
                height: 100%;
                background: #D62D31;
                text-align: center;
                p {
                     width: r(130px);
                    line-height: r(300px);
                    color: white;
                    font-size: r(28px);
                    border-bottom: r(1px) solid #E1E1E1;
                }
            }
        }
        .container ::-webkit-scrollbar {
            display: none;
        }
    }
    //绝对定位定底部
    .main_bottom {
        position: fixed;
        bottom: 0;
        z-index: 3;
        width: r(640px);
        height: r(90px);
        font-size: 0;
        border-top: r(1px) solid #bbb9ba;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .QX {
            height: 100%;
            width: r(160px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: r(25px);
            .QX_options {
                width: r(35px);
                height: r(35px);
                border: r(1px) solid black;
                border-radius: 50%;
                border: 1px solid #E1E1E1;
                padding-left: r(4px);
                i {
                    text-align: center;
                    line-height: r(35px);
                    font-size: r(25px);
                    color: white;
                }
            }
            span {
                margin-left: r(15px);
                flex-grow: 1;
                font-size: r(28px);
            }
        }
        .HJ {
            height: 100%;
            width: r(240px);
            background-color: yellow;
            text-align: center;
            .HJ_p1 {
                font-size: r(28px);
                color: #666666;
                margin-top: r(10px);
                span {
                    color: black;
                    font-weight: bold;
                }
            }
            .HJ_p2 {
                font-size: r(20px);
                span {
                    margin-right: r(15px);
                    font-weight: bold;
                }
            }
        }
        .QJS {
            height: 100%;
            width: r(240px);
            background-color: #d62d31;
            text-align: center;
            line-height: r(90px);
            span {
                font-size: r(28px);
                color: white;
            }
        }
    }
    //勾选选项框，用JS改变
    .active {
        background-color: #d62d31;
        border: r(1px) solid #d62d31;
    }
}